<div class="box gradient span4">
    <div class="title">
        <div class="row-fluid">
            <div class="span6">
                <h4>
                    <span>Resize</span>
                </h4>
            </div>
            <!-- End .span6 -->
            <div class="span6 to_hide right_offset">
                <div class="btn-toolbar">
                    <div class="options_arrow pull-right">
                    </div>
                </div>
            </div>
            <!-- End .span6 -->
        </div>
        <!-- End .row-fluid -->
    </div>
    <!-- End .title -->
    <div class="content">


        <div
            id="placeholder4"
            style="width: 100%; height: 200px;"></div>

        <?php
        registerScriptFile(baseUrl() . '/js/jquery.flot.js');
        registerScriptFile(baseUrl() . '/js/jquery.flot.stack.js');
        registerScriptFile(baseUrl() . '/js/jquery.flot.resize.js');
        ?>


        <script id="source">

        $(function () {
            var d1 = [];
            for (var i = 0; i < 14; i += 0.5)
                d1.push([i, Math.sin(i)]);

            var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
            var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

            var placeholder = $("#placeholder4");

            var plot = $.plot(placeholder, [d1, d2, d3]);

            // the plugin includes a jQuery plugin for adding resize events to
            // any element, let's just add a callback so we can display the
            // placeholder size
            placeholder.resize(function () {

            });
        });
            </script>


    </div>
</div>
